<template>
    <div>
        <Headers>商品详情</Headers>
    <Tab style="top:45px" active-color="orange">
        <TabItem selected @on-item-click="onItemClick">商品</TabItem>
        <TabItem @on-item-click="onItemClick">详情</TabItem>
        <TabItem @on-item-click="onItemClick">评价</TabItem>
        
    </Tab>
    <div id="product-main">
        <component :is="type"></component>
    </div>
    <Toast v-model="addCartShows">{{addcartMsg}}</Toast>
        {{addCartShow}}
        <Buy></Buy>
    </div>
</template>

<script>

import {Tab,TabItem,Swiper,SwiperItem,Toast} from "vux"
import Headers from "../components/Headers.vue"
import Goods from "../components/Goods.vue"
import Partculars from "../components/Partculars.vue"
import Evaluate from "../components/Evaluate.vue"
import Buy from "../components/Buy.vue"
import {mapState} from "vuex";


export default {
    computed: {
        ...mapState([
            "addcartMsg",
        ]),
        addCartShow(){
            this.addCartShows = this.$store.state.addCartShow;
            setTimeout(()=>{
                
                this.$store.commit("setAddcartShow");
            },1000)
        }
    },
    data:function(){
        return {
            type:"Goods",
            addCartShows:null,
        }
    },
    components: {
        Tab,
        TabItem,
        Headers,
        Goods,
        Partculars,
        Evaluate,
        Buy,
        Toast,
    },
    methods: {
        onItemClick:function(index){
            if(index==0){
                this.type = "Goods";
            }else if(index==1){
                this.type = "Partculars";
            }else{
                this.type = "Evaluate"
            }
        }
    },
    mounted:function () {
        this.$store.dispatch("requestProduct",this.$route.params);
  
    },
     

}
</script>

<style scoped>
    #product-main{
        margin-top: 44px;
    }
</style>